<template>
    <div class="login-container d-flex align-items-center justify-content-center">
        <div class="card p-4 shadow-lg rounded-lg">
            <h2 class="text-center mb-4">物业管理系统</h2>
            <form @submit.prevent="handleLogin">
                <div class="form-group mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input
                        type="text"
                        id="username"
                        v-model="username"
                        class="form-control"
                        placeholder="请输入用户名"
                        required
                    />
                </div>

                <div class="form-group mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input
                        type="password"
                        id="password"
                        v-model="password"
                        class="form-control"
                        placeholder="请输入密码"
                        required
                    />
                </div>

                <button type="submit" class="btn btn-primary w-100">登录</button>
            </form>
            <!-- 显示错误消息 -->
            <div v-if="errorMessage" class="alert alert-danger mt-3" role="alert">
                {{ errorMessage }}
            </div>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
    name: 'Login',
    setup() {
        const username = ref('');  // 用户名
        const password = ref('');  // 密码
        const errorMessage = ref('');  // 错误消息

        // 登录处理函数
        const handleLogin = async () => {
            try {
                // 向后端发送登录请求
                const response = await axios.post('http://localhost:3008/login', {
                    owner_id: username.value,  
                    password: password.value,  
                });

                if (response.status === 200) {
                    const { token, user } = response.data; 
                    const { role } = user; 

                    localStorage.setItem('token', token);
                    localStorage.setItem('user', JSON.stringify(user)); 

                    // 根据角色跳转到不同页面
                    if (role === '管理员') {
                        window.location.href = '/home/dashboard'; // 管理员首页
                    } else if (role === '业主') {
                        window.location.href = '/user_home'; // 普通用户首页
                    } else {
                        throw new Error('无效角色');
                    }
                }
            } catch (error) {
                console.error('登录失败:', error);
                errorMessage.value = '用户名或密码错误'; 
            }
        };

        return {
            username,
            password,
            errorMessage,
            handleLogin,
        };
    },
};
</script>

<style scoped>
.login-container {
    min-height: 100vh;
    background: linear-gradient(to right, #007bff, #6a11cb);
    padding: 20px;
}

.card {
    width: 100%;
    max-width: 400px;
    background: white;
    border: none;
}

.form-control {
    border-radius: 0.5rem;
    box-shadow: none;
    border: 1px solid #ced4da;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

button {
    border-radius: 0.5rem;
}

.alert {
    border-radius: 0.5rem;
}
</style>
